{% extends "layout.html" %}

<!-- 插入额外的CSS -->
{% block extra_css %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/hike_detail.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 添加富文本编辑器CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.14/css/froala_editor.pkgd.min.css" rel="stylesheet">
{% endblock %}

<!-- 插入额外的JS -->
{% block extra_js %}
    <script src="{{ url_for('static', filename='js/hike_detail.js') }}"></script>
    <!-- 添加富文本编辑器JS -->
    <script src="{{ url_for('static', filename='js/froala_editor/froala_editor.pkgd.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/froala_editor/zh_cn.min.js') }}"></script>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化评论富文本编辑器
        new FroalaEditor('textarea[name="content"]', {
            language: 'zh_cn',
            toolbarButtons: {
                'moreText': {
                    'buttons': ['bold', 'italic', 'underline', 'strikeThrough']
                },
                'moreParagraph': {
                    'buttons': ['alignLeft', 'alignCenter', 'alignRight']
                },
                'moreRich': {
                    'buttons': ['insertLink', 'insertImage', 'emoticons']
                },
                'moreMisc': {
                    'buttons': ['undo', 'redo']
                }
            },
            // 图片上传配置
            imageUploadURL: '{{ url_for("comments.upload_image") }}',
            imageUploadParams: {
                froala: 'true'
            },
            // 其他配置
            heightMin: 150,
            placeholderText: '分享你的徒步体验...'
        });
    });
    </script>
{% endblock %}

{% block content %}
<div class="detail-container">
    <!-- 返回按钮 -->
    <a href="{{ url_for('hikes.index') }}" class="back-btn">
        <i class="fas fa-arrow-left"></i>
        <span>返回列表</span>
    </a>

    <!-- 路线图集 -->
    <div class="hike-gallery">
        <img src="{{ url_for('static', filename='images/' + hike.image) }}"
             alt="{{ hike.name }}"
             class="gallery-main"
             loading="lazy">
    </div>

    <!-- 核心信息 -->
    <div class="hike-main">
        <div class="hike-header">
            <div class="title-wrapper">
                <h1 class="hike-title">{{ hike.name }}</h1>
                <div class="difficulty-badge {{ hike.difficulty|lower }}">
                    {{ hike.difficulty }}
                </div>
            </div>

            <div class="hike-stats">
                <div class="stat-item">
                    <div class="stat-icon">
                        <i class="fas fa-ruler-combined"></i>
                    </div>
                    <div class="stat-content">
                        <span class="stat-label">长度</span>
                        <span class="stat-value">{{ hike.length }}</span>
                    </div>
                </div>

                <div class="stat-item">
                    <div class="stat-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-content">
                        <span class="stat-label">预计耗时</span>
                        <span class="stat-value">{{ hike.duration }}小时</span>
                    </div>
                </div>

                <div class="stat-item">
                    <div class="stat-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <div class="stat-content">
                        <span class="stat-label">最佳季节</span>
                        <span class="stat-value">{{ hike.best_time }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 评分和基本信息 -->
        <div class="hike-meta">
            <div class="meta-card">
                <div class="hike-rating">
                    <div class="rating-stars">
                        {% for i in range(5) %}
                            {% if i < hike.score|int %}
                                <i class="fas fa-star filled"></i>
                            {% else %}
                                <i class="far fa-star"></i>
                            {% endif %}
                        {% endfor %}
                    </div>
                    <div class="rating-value">
                        <span>{{ hike.score }}</span>/5
                    </div>
                    <div class="rating-count">
                        ({{ comments|length }}条评价)
                    </div>
                </div>

                <div class="meta-divider"></div>

                <div class="hike-location">
                    <div class="meta-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="meta-text">
                        <span class="meta-label">地址</span>
                        <span class="meta-value">{{ hike.address }}</span>
                    </div>
                </div>
            </div>

            {% if hike.two_step_map_url %}
            <div class="map-card">
                <div class="map-preview">
                    <i class="fas fa-map"></i>
                </div>
                <div class="map-info">
                    <h3>路线地图</h3>
                    <p>仅供参考，建议使用专业徒步app查看最新记录</p>
                    <a href="{{ hike.two_step_map_url }}" target="_blank" class="map-link">
                        <i class="fas fa-external-link-alt"></i> 查看两步路地图
                    </a>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- 内容区域 -->
        <div class="content-sections">
            <!-- 路线描述 -->
            <div class="content-section">
                <div class="section-header">
                    <div class="section-icon">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <h2>路线介绍</h2>
                </div>
                <div class="section-content">
                    <p style="white-space: pre-line;">{{ hike.description }}</p>
                </div>
            </div>

            <!-- 推荐路线 -->
            <div class="content-section">
                <div class="section-header">
                    <div class="section-icon">
                        <i class="fas fa-directions"></i>
                    </div>
                    <h2>推荐路线</h2>
                </div>
                <div class="section-content">
                    <p>{{ hike.route }}</p>
                </div>
            </div>

            <!-- 装备建议 -->
            <div class="content-section">
                <div class="section-header">
                    <div class="section-icon">
                        <i class="fas fa-hiking"></i>
                    </div>
                    <h2>装备建议</h2>
                </div>
                <div class="section-content">
                    <ul class="equipment-list">
                        {% for item in hike.equipment %}
                        <li>
                            <div class="equipment-icon">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <span>{{ item }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

        <!-- 评论区 -->
        <div class="comments-section">
            <div class="section-header">
                <div class="section-icon">
                    <i class="fas fa-comments"></i>
                </div>
                <h2>用户评价</h2>
                <span class="comments-count">{{ comments|length }}条评论</span>
            </div>

            {% if comments %}
                <!-- 评论部分 -->
                <div class="comments-list">
                    {% for comment in comments if comment.status == 'approved' %}
                    <div class="comment-item">
                        <div class="comment-avatar">
                            <i class="fas fa-user-circle"></i>
                        </div>
                        <div class="comment-content">
                            <div class="comment-header">
                                <span class="comment-user">{{ comment.user }}</span>
                                <span class="comment-time">{{ comment.timestamp | datetimeformat }}</span>
                            </div>
                            <div class="comment-text">
                                <p style="white-space: pre-line;">{{ comment.content|safe }}</p>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div class="no-comments">
                        <div class="no-comments-icon">
                            <i class="fas fa-comment-slash"></i>
                        </div>
                        <p>暂无评论，快来发表你的徒步体验吧！</p>
                    </div>
                    {% endfor %}
                </div>
            {% endif %}

            <!-- 评论表单 -->
            <div class="comment-form">
                <h3><i class="fas fa-edit"></i> 发表评论</h3>
                {% if current_user.is_authenticated %}
                    <form action="{{ url_for('comments.add_comment', hike_id=hike.id) }}" method="post">
                        <input type="hidden" name="hike_id" value="{{ hike.id }}">
                        <div class="form-group">
                            <div class="input-with-icon">
                                <i class="fas fa-user"></i>
                                <input type="text" name="user" value="{{ current_user.username }}" class="readonly-input" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <textarea name="content" placeholder="分享你的徒步体验..." required></textarea>
                        </div>
                        <button type="submit" class="btn-submit">
                            <i class="fas fa-paper-plane"></i> 提交评论
                        </button>
                    </form>
                {% else %}
                    <div class="login-prompt">
                        <div class="prompt-icon">
                            <i class="fas fa-exclamation-circle"></i>
                        </div>
                        <p>您需要<a href="{{ url_for('login') }}">登录</a>后才能发表评论</p>
                        <a href="{{ url_for('login') }}" class="btn-login">
                            <i class="fas fa-sign-in-alt"></i> 立即登录
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}